<html>
<head>
  <title>DAIR.Sound</title>
  
<link href="css/Sound.css" rel="stylesheet" type="text/css"></link>
<link href="../js/dijit/themes/dijit.css" rel="stylesheet" type="text/css"></link>
<link href="../js/dijit/themes/tundra/form/Button.css" rel="stylesheet" type="text/css"></link>
<script>
	djConfig={
		isDebug:true, 				// true debugs to Console or terminal, false, no output
		parseOnLoad: true, 
		airConfig:{
			terminal:false,			// logs to terminal window, does not open Console
			debuggerKey:119,		// the keyCode that opens the Console (doesn't really work)
			introspectorKey:118, 	// the keyCode that opens the Console 
			showTimestamp:false,	// whether to show a timestamp on every line
			showSender:false		// whether to show the file on every line
		}
	}

</script>
<script src="../js/dojo/dojo.js"></script>

<script>

dojo.require("dair.AIR");

	dojo.require("dair.Sound");
	dojo.require("dijit.form.Slider"); 
	dojo.require("dijit.form.Button");
	dojo.require("dojo.parser");
	
	var player, progress;
	dSound = function(){
		
		
		dojo.byId("timeNode").innerHTML = "RDY"
		player = new dair.Sound({url:"media/BeastieBoys-BrassMonkey.mp3"});
		
		progress.init();
		volume.init();
		pan.init();
		spectrum.init();
		
		dojo.connect(player, "onPosition", function(evt){
			dojo.byId("timeNode").innerHTML = evt.seconds;
		});
		
		dojo.connect(player, "onID3", function(evt){
			var txt = 	"Song:   "+evt.songName+
						"<br/>Artist: "+evt.artist+
						"<br/>Album:  "+evt.album+
						"<br/>track:  "+evt.track+
						"<br/>year:  "+evt.year
			dojo.byId("info").innerHTML = txt;
		});
		
	}
	
	
	spectrum = {
		channels:2,
		bars:16, //2,4,8,16, etc. * 2, for left and right 
		isPlaying:false,
		init: function(){
			console.log("init spectrum")
			this.mixer = dair.SoundMixer;
			this.domNode = dojo.byId("spectrum");
			this.build();
			dojo.connect(player, "onStatus", this, function(status){
				this.isPlaying = (status=="playing");
			});
			this.tmr = setInterval(dojo.hitch(this, "visualize"), 100);
		},
		visualize: function(){
		//console.log("player:", player.onStatus)
			if(this.isPlaying){
				var ar = this.mixer.spectrum();
				this.nodes.forEach(function(n,i){
					dojo.style(n, "width", ar[i]);
				});
			}
		},
		build: function(){
			var txt = "";
			var dim = dojo.marginBox(this.domNode);
			var h = (dim.h-20)/(this.bars*this.channels);
			for(var i=0;i<this.bars*this.channels;i++){
				txt+='<div style="height:'+h+'px;"></div>';
			}
			this.domNode.innerHTML = txt;
			this.nodes = dojo.query("div", this.domNode);
		}
	}
	
	
	volume = {
		init: function(){
			this.mixer = dair.SoundMixer;
			this.volNode = dijit.byId("volume");
			var v = this.mixer.volume()*100;
			this.volNode.attr("value", v);
			dojo.connect(this.volNode, "onChange", this, "onChange");
		},
		onChange: function(val){
			this.mixer.volume(val*0.01);
		}
	}
	
	
	pan = {
		init: function(){
			this.mixer = dair.SoundMixer;
			this.panNode = dijit.byId("pan");
			var p = (this.mixer.pan()+1)*50
			this.panNode.attr("value", p)
			dojo.connect(this.panNode, "onChange", this, "onChange");
		},
		onChange: function(val){
			this.mixer.pan(val*0.02-1);
		}
	}
	
	
	progress = {
		init: function(){
			this.duration = null;
			this.seeking = false;
			this.progressBar = dijit.byId("progress");
			
			dojo.connect(this.progressBar.sliderHandle, "mousedown", this, "startDrag");
			dojo.connect(player, "onPosition", this, "onPosition");
			dojo.connect(player, "onDownloaded", this, "onDownloaded");
			dojo.connect(player, "onLoad", this, "onLoadComplete");
		},
		onDownloaded: function(evt){
			dojo.byId("durNode").innerHTML = evt.durSeconds;
			//if(evt.duration > player.bufferTime){
				this.duration = evt.estDuration || evt.duration;
			//}
			
		},
		onLoadComplete: function(evt){console.log("onLoadComplete");
			this.duration = evt.duration;
			dojo.byId("durNode").innerHTML = evt.durSeconds;
		},
		onDrag: function(val){
			//
			if(this.seeking){
				//console.log("DRAG:", val);
				var p = val*.01
				player.position(this.duration*p);
			}
		},
		startDrag: function(){
			this.seeking = true;
			this.conChg = dojo.connect(this.progressBar, "onChange", this, "onDrag");
			this.conUp = dojo.connect(dojo.doc, "mouseup", this, "endDrag")
		},
		endDrag: function(){
			this.seeking = false;
			dojo.disconnect(this.conUp);
			dojo.disconnect(this.conChg);
		},
		onPosition: function(){
			
			var time = player.position();
			if(this.duration){
				if(!this.seeking){
					var p = time/this.duration;
					this.progressBar.attr("value", p*100);
				}
			}
		},
		timecode: function(time){
			ts = time.toString()

			if(ts.indexOf(".")<0){
				ts += ".00"
			}else if(ts.length - ts.indexOf(".")==2){
				ts+="0"
			}else if(ts.length - ts.indexOf(".")>2){
				ts = ts.substring(0, ts.indexOf(".")+3)
			}
			return ts;
		}
	}
	
		dojo.addOnLoad(function() {
			dSound();
		});
  </script>

</head>
<body class="tundra">
  <h1>Dair.Sound test</h1>
  
    <div id="progressContainer">
        <div id="progress" 
            dojoType="dijit.form.HorizontalSlider"
            showButtons="false"
            intermediateChanges="true"
        ></div>
    </div>
    
    
    
    <div id="blackBox">
        <div id="timeContainer">
            <div id="timeNode">0.0</div>
            <div id="durNode">0.0</div>
        </div>
        
        <div id="buttonContainer">
            <button dojoType="dijit.form.Button" onClick="player.play()">Play</button>
            <button dojoType="dijit.form.Button" onClick="player.pause()">Pause</button>
            <button dojoType="dijit.form.Button" onClick="player.stop()">Stop</button>
           
            <button dojoType="dijit.form.Button" onClick="player.position(20000)">Seek to 20.0</button>
            <button dojoType="dijit.form.Button" onClick="player.position(player.position()+1000)">Jump</button>
        </div>
         <div style="clear:both;"></div>
         
        <div id="volumeContainer">
    	
        <div id="volume" 
            dojoType="dijit.form.HorizontalSlider"
            showButtons="false"
            intermediateChanges="true"
        ></div>
        <label>Volume</label>
    </div>
    
    <div id="panContainer">
       
        <div id="pan" 
            dojoType="dijit.form.HorizontalSlider"
            showButtons="false"
            intermediateChanges="true"
        ></div> 
        <label>Pan</label>
    </div>
    	
        <div style="clear:both;"></div>
        
        <div id="info"></div>
        <div id="spectrum"></div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>
